<template>
    <div class="autoReplyVue">
        <el-dialog title="管理自动回复" :visible.sync="dialogTableVisible" :show-close="true" :center="true" top="10vh"  :before-close="beforeClose">
            <div class="dialogVue">
                <div class="headerVue flex_between align_center">
                    <div class="tabVue">
                        <div class="tab" :class="{active: replyCurrent===1}" @click="changeReplyCurrent(1)">批量开启</div>
                        <div class="tab" :class="{active: replyCurrent===2}" @click="changeReplyCurrent(2)">批量关闭</div>
                    </div>
                    <div class="flex">
                        <el-select v-model="classflyName" placeholder="选择分组" style="width: 180px;" @change="classflyChange" clearable>
                            <el-option v-for="item in categoryList" :key="item.name" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                        <el-select v-model="tagName" placeholder="选择标签" style="width: 180px; margin-left: 10px;" @change="tagChange" clearable>
                            <el-option v-for="item in tagList" :key="item" :label="item" :value="item"></el-option>
                        </el-select>
                        <el-input v-model="key" style="width: 180px; margin-left: 10px;" placeholder="搜索关键字" prefix-icon="el-icon-search" :clearable="true" @input="reStart"></el-input>
                    </div>
                </div>
                <div class="bodyVue margin20 relative">
                    <div class="bodyInner flex flex_wrap">
                        <div class="ver flex align_center" v-for="(ver, i) in list" :key="i" :class="{active: JSON.stringify($store.state.selectList).includes(JSON.stringify(ver))}" @click="selectFun(ver)">
                            <img src="../../../assets/weChat.png" style="width: 44px; height: 44px;" v-if="ver.type===0">
                        <img src="../../../assets/weChat_group.png" style="width: 44px; height: 44px;" v-if="ver.type===1">
                            <span class="line-1">{{ver.type ===0 ? ver.friendWechatName : ver.groupName}} </span>
                        </div>
                    </div>
                    <!-- 列表为空 -->
                    <div class="flex_column align_center absolute_auto" v-if="isEmpty">
                        <img src="../../../assets/empty.png" slot="empty" style="width: 313px; height: 172px; margin-bottom: 15px">
                        <span style="color: #999; font-size: 14px">无可操作对象哦~</span>
                    </div>
                </div>
                <div class="paginationVue flex_between align_center">
                    <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>
                    <div class="flex">
                        <div class="all" @click="changeReplyAll">{{ replyCurrent===1 ? "一键开启所有" : "一键关闭所有" }}</div>
                        <div class="btn" @click="changeReplyBySelect" :class="{active: $store.state.selectList.length>0}">{{ replyCurrent===1 ? "开启所选" : "关闭所选" }}</div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {toast} from "@/common/tools"
import { mapState } from "vuex";
export default {
    props: {
        dialogTableVisible: {
            type: Boolean,
            default: false
        },
        categoryList: {
            type: Array,
            default: ()=>{}
        }
    },
    computed: {
        ...mapState({
            currentWeChat: state=> state.currentWeChat
        })
    },
    data(){
        return {
            key: "",
            list: [],
            pageNum: 1,
            pageSize: 40,
            total: 0,
            replyCurrent: 1,
            classflyName: "",
            classflyId: "",
            tagName: "",
            isEmpty: false,
            tagList: ["高意向","中意向","低意向","了解产品详情", "询问价格", "询问使用方法", "询问发货时间", "询问售后服务", "非常满意", "满意", "一般", "不满意", "非常不满意", "产品质量", "发货时间", "售后服务", "使用问题", "价格问题", "新客户", "忠实客户", "活跃", "潜在", "流失"],
        }
    },

    methods: {
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val
            this.getList()
        },
        beforeClose(){
            this.$store.state.selectList = []
            this.pageNum = 1
            this.$emit("beforeClose")
        },

        classflyChange(e){
            this.classflyId = e
            this.reStart()
        },

        tagChange(e){
            this.tagName = e
            this.reStart()
        },

        changeReplyCurrent(index){
            this.replyCurrent = index
            this.reStart()
        },

        reStart(){
            this.pageNum = 1
            this.getList()
        },

        getList(){
            this.$post("/front/wechat/friend/friendList", {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                userWechatPrimaryId: this.currentWeChat.currentWeChatId,
                automaticResponse: this.replyCurrent===1 ? 0 : 1,
                categoryId: this.classflyId,
                tag: this.tagName,
                userWechatName: this.currentWeChat.currentUserWechatName,
                content: this.key
            }).then(res=>{
                if(res.data.code===0) {
                    this.list = res.data.obj.list
                    this.isEmpty = this.list.length===0
                    this.total = res.data.obj.total
                }
            })
        },

        selectFun(item){
            console.log(item, JSON.stringify(this.$store.state.selectList).includes(JSON.stringify(item)))
            if(JSON.stringify(this.$store.state.selectList).includes(JSON.stringify(item))) {
                this.$store.state.selectList = this.$store.state.selectList.filter(o=>{
                    return item != o
                }) 
            }else{
                this.$store.state.selectList.push(item)
                console.log(this.$store.state.selectList)
            }
        },

        // 批量开启自动回复或关闭
        changeReplyBySelect(){
            if(this.$store.state.selectList.length===0) return toast(1, "请至少选择一个对象")
            let ids = []
            this.$store.state.selectList.forEach(item=>{
                ids.push(item.id)
            })
            this.$post("/front/wechat/friend/batchSetAutomaticResponse", {
                friendIds: ids.join(","),
                value: this.replyCurrent===1 ? 1 : 0
            }).then(res=>{
                if(res.data.code===0) {
                    toast(0, this.replyCurrent===1?"批量开启自动回复成功":"批量关闭自动回复成功")
                    this.beforeClose()
                    this.$emit("callback")
                }
            })
        },

        // 一键开启自动回复或关闭所有
        changeReplyAll(){
            this.$post("/front/wechat/friend/oneTouchAndClose", {
                userWechatPrimaryId: this.currentWeChat.currentWeChatId,
                automaticResponse: this.replyCurrent===1 ? 1 : 0,
            }).then(res=>{
                if(res.data.code===0) {
                    toast(0, this.replyCurrent===1 ? "开启所有自动回复成功" : "关闭所有自动回复成功")
                    this.beforeClose()
                    this.$emit("callback")
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
    width: 1056px !important;
    height: 80vh !important;
    border-radius: 10px;
}
:deep(.el-dialog__header) {
    padding: 10px 0 0 !important;
}
:deep(.el-dialog__body) {
    padding: 0 !important;
}
.dialogVue {
    width: 100%;
    .headerVue {
        width: 100%;
        height: 60px;
        padding: 20px 20px 0 20px;
        .tabVue {
            display: flex;
            .tab {
                width: 80px;
                height: 40px;
                background: #f5f5f5;
                border-radius: 5px;
                line-height: 40px;
                text-align: center;
                color: #333;
                margin-right: 10px;
                cursor: pointer;
            }
            .active {
                background: #0147fd;
                color: #fff;
            }
        }
    }
    .bodyVue {
        width: 100%;
        height: calc(80vh - 174px);
        padding: 0 20px;
        overflow: scroll;
        .bodyInner {
            width: 100%;
            .ver {
                width: 246px;
                height: 50px;
                border: 1px solid #f5f5f5;
                margin-bottom: 10px;
                margin-right: 10px;
                cursor: pointer;
                padding: 0 10px;
                border-radius: 4px;
                span {
                    color: #81868e;
                    padding-left: 10px;
                }
            }
            .ver:nth-child(4n) {
                margin-right: 0;
            }
            .active {
                border: 1px solid #0147fd;
                background: rgba(1,71,253, 0.1);
            }
        }  
    }
    .bodyVue::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .paginationVue {
        width: 100%;
        height: 60px;
        background: #fff;
        padding: 0 20px 0 10px;
        .all {
            width: 120px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: #0147fd;
            border-radius: 5px;
            color: #fff;
            cursor: pointer;
            margin-right: 10px;
        }
        .btn {
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: #999;
            border-radius: 5px;
            color: #fff;
            cursor: pointer;
        }
        .active {
            background: #0147fd;
        }
    }
}
</style>